<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <button @click="cut">点击切换组件</button>
    <!-- 包裹动态组件的 本身不可以当成一个标签使用-->
    <keep-alive>
      <component :is="componentId"></component>
    </keep-alive>
    <el-button type="primary">主要按钮</el-button>
    <el-switch v-model="value" active-color="red" inactive-color="green">
    </el-switch>
  </div>
</template>

<script>
import one from "../components/one.vue";
import two from "../components/two.vue";
import three from "../components/three.vue";
export default {
  name: "Home",
  components: {
    one,
    two,
    three,
  },
  data() {
    return {
      componentId: "three",
      value: true,
    };
  },
  methods: {
    cut() {
      this.componentId = "one";
    },
  },
};
</script>
